<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置管理</title>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/settingManagement.css">
    <link rel="stylesheet" href="../css/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../css/element-ui/lib/index.js"></script>
    <script src="../js/axios.js"></script>
</head>

<body>
    <div id="app">
        <el-row>
            <el-col :span="3">
                <ul class="activeItem">
                    <li :class="[activeItemDetail == 1?'activeDetail':'']" @click="activeItemDetail=1">二次供水设备类别</li>
                    <li :class="[activeItemDetail == 2?'activeDetail':'']" @click="activeItemDetail=2">区域划分</li>
                    <li :class="[activeItemDetail == 3?'activeDetail':'']" @click="activeItemDetail=3">设备绑定方式</li>
                    <li :class="[activeItemDetail == 4?'activeDetail':'']" @click="activeItemDetail=4">权限设置</li>
                    <li :class="[activeItemDetail == 5?'activeDetail':'']" @click="activeItemDetail=5">组织架构</li>
                </ul>
            </el-col>
            <el-col :span="21">
                <div v-show="activeItemDetail == 1" class="DataDom1">
                    <div class="DataDom1Top">
                        <h3>二次供水设备类别设置</h3>
                        <div>
                            <el-button type="primary" icon="el-icon-plus" size="mini">添加</el-button>
                            <el-button type="primary" icon="el-icon-edit-outline" size="mini">修改</el-button>
                            <el-button type="primary" icon="el-icon-delete" size="mini">删除</el-button>
                        </div>
                    </div>

                    <el-table ref="multipleTable" :data="DataDom1TableData" tooltip-effect="dark"
                        @selection-change="handleSelectionChange1">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="type" label="设备类别" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作" width="130">
                            <template slot-scope="scope">
                                <el-button type="text" size="small"><i class="el-icon-edit-outline"></i>修改</el-button>
                                <el-button type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-show="activeItemDetail == 2" class="DataDom2">
                    <div class="DataDom2Top">
                        <h3>区域划分</h3>
                    </div>
                    <el-row style="margin:0 0 0 30px" :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-button style="margin: 20px 0 0 20px;" type="primary" icon="el-icon-plus"
                                    size="mini">添加</el-button>
                                <div class="show" v-for="(item,index) in provice" :key="item.id" style="cursor:pointer"
                                    :class="currentIndex==index?'active':''" @click="chooseSheng(index)">{{item.name}}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-button style="margin: 20px 0 0 20px;" type="primary" icon="el-icon-plus"
                                    size="mini">添加</el-button>
                                <div class="show" v-for="(item,index) in city" :key="item.id" style="cursor:pointer"
                                    :class="currentIndex1==index?'active':''" @click="chooseCity(index)">{{item.name}}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content">
                                <el-button style="margin: 20px 0 0 20px;" type="primary" icon="el-icon-plus"
                                    size="mini">添加</el-button>
                                <div class="show" v-for="(item,index) in qu" :key="item.id" style="cursor:pointer"
                                    :class="currentIndex2==index?'active':''" @click="chooseQu(index)">{{item}}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="activeItemDetail == 3" class="DataDom3">
                        <h3>设备绑定方式</h3>
                </div>
                <div v-show="activeItemDetail == 4" class="DataDom4">权限设置</div>
                <div v-show="activeItemDetail == 5" class="DataDom5">组织架构</div>
            </el-col>
        </el-row>
    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                //选中tab
                activeItemDetail: 1,
                //二次供水设备类别表格数据
                DataDom1TableData: [],
                multipleSelection1: [],
                //设备绑定方式表格数据
                // DataDom3TableData: [],
                // multipleSelection3: [],
                //区域划分
                currentIndex: null,
                currentIndex1: null,
                currentIndex2: null,
                provice: [],
                city: [],
                qu: [],
            }
        },
        created() {},
        mounted() {
            this.getDataDom1TableData()
        },
        updated() {},
        watch: {},
        methods: {
            handleSelectionChange1(val) {
                this.multipleSelection1 = val;
            },
            // 获取表格数据
            getDataDom1TableData() {
                axios.get("../json/settingManagement.json").then(res => {
                    console.log(res);
                    this.DataDom1TableData = res.data.result.DataDom1TableData
                    this.DataDom3TableData = res.data.result.DataDom3TableData
                    this.provice = res.data.result.provice
                })
            },
            chooseSheng(index) {
                this.city = '';
                this.qu = '';
                this.currentIndex1 = null;
                this.currentIndex2 = null;
                this.currentIndex = index;
                this.city = this.provice[index].city;
            },
            chooseCity(index) {
                this.currentIndex2 = null;
                this.currentIndex1 = index;
                this.qu = this.city[index].districtAndCounty;
            },
            chooseQu(index) {
                this.currentIndex2 = index;
            },
        }
    })
</script>